import React,{Component} from 'react'
import {Route,Switch} from 'react-router-dom'
import Home from './pages/Home'     //路由组件
import About from './pages/About'
import Bing from './pages/Bing'
import Nazha from './pages/Nazha'
import Header from './components/Header'    //一般组件
import MyNavLink from './components/MyNavLink'

export default class App extends Component{
  render(){
    return (
      <div>
        <div className="row">
          <div className="col-xs-offset-2 col-xs-8">
            <Header />
          </div>
        </div>
        <div className="row">
          <div className="col-xs-2 col-xs-offset-2">
            <div className="list-group">
              {/* 在React中靠路由链接实现切换组件---编写路由链接 */}
              {/* 第一种写法 */}
              {/* <MyNavLink to="/about" title="迪丽热巴"/>
              <MyNavLink to="/home" title="AngelaBaby"/>
              <MyNavLink to="/bing" title="范冰冰"/>
              <MyNavLink to="/nazha" title="古力娜扎"/> */}

              {/* 第二种写法 */}
               <MyNavLink to="/about">迪丽热巴</MyNavLink>
               <MyNavLink to="/home">AngelaBaby</MyNavLink>
               <MyNavLink to="/bing/a/b">范冰冰</MyNavLink>
               <MyNavLink to="/nazha/c/d">古力娜扎</MyNavLink>
            </div>
          </div>
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body">
                {/* 注册路由 
                  Switch：可以提高路由匹配效率，当path匹配成功后，就不再往下匹配了
                  注意：Switch只能有一个子路由组件
                  路由是默认模糊查询，添加exact则变成精准查询
                  两种写法：1.exact     2.exact={true}
                */}
                <Switch>
                  <Route path="/about" component={About}/>
                  <Route path="/home" component={Home}/>
                  <Route exact path="/bing" component={Bing}/>
                  <Route path="/nazha" component={Nazha}/>
                </Switch>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}